<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<title>RTCMultiConnection Features Demo</title>
<h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> Features Demo / <a href="https://www.webrtc-experiment.com/">Goto Homepage</a>
</h1>
<style>
video {
    max-width: 45%;
}
</style>
<hr />
<button id="prepare-connection">Prepare Connection</button>

<button id="setup-room" disabled>Setup Room</button>

<select id="resolutions">
    <option>320:180</option>
    <option>320:240</option>
    <option>640:480</option>
    <option>640:360</option>
    <option>960:720</option>
    <option>1280:720</option>
    <option>1920:1080</option>
</select>
<select id="ice-servers">
    <option>url: turn:webrtc%40live.com@numb.viagenie.ca, credential: muazkh</option>
    <option>url: turn:homeo@turn.bistri.com:80, credential: homeo</option>
    <option>url: stun:stun.l.google.com:19302</option>
    <option>url: 23.21.150.121:3478</option>
    <option>url: 216.93.246.18:3478</option>
    <option>url: 66.228.45.110:3478</option>
    <option>url: 173.194.78.127:19302</option>
    <option>url: 74.125.142.127:19302</option>
    <option>url: provserver.televolution.net</option>
    <option>url: sip1.lakedestiny.cordiaip.com</option>
    <option>url: stun1.voiceeclipse.net</option>
    <option>url: stun01.sipphone.com</option>
    <option>url: stun.callwithus.com</option>
    <option>url: stun.counterpath.net</option>
    <option>url: stun.endigovoip.com</option>
</select>

<select id="ice-candidates">
    <option>relay</option>
    <option>reflexive</option>
    <option>relay+reflexive</option>
    <option>host</option>
    <option>all</option>
</select>
<hr />

<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
</script>
<script src="//cdn.webrtc-experiment.com/firebase.js">
</script>

<script>
var connection;

function setupConnection() {
    connection = new RTCMultiConnection();
    connection.session = {
        audio: true,
        video: true
    };

    var properties = document.querySelector('#ice-servers').value.split(', ');
    var iceServer = {};
    properties.forEach(function(property) {
        var tup = property.split(': ');
        iceServer[tup[0]] = tup[1];
    });

    console.log(iceServer);
    connection.iceServers = [iceServer];

    var select = document.querySelector('#resolutions');
    var coords = select.value.split(':');

    var width = coords[0];
    var height = coords[1];

    console.log(width, ':', height);
    connection.media.min(width, height);
    connection.media.max(width, height);

    var iceCandidates = document.querySelector('#ice-candidates').value;

    connection.candidates.host = iceCandidates.indexOf('host') != -1;
    connection.candidates.reflexive = iceCandidates.indexOf('reflexive') != -1;
    connection.candidates.relay = iceCandidates.indexOf('relay') != -1;

    connection.onstream = function(e) {
        document.body.appendChild(e.mediaElement);
    };

    // searching for existing sessions
    connection.connect();
}

document.getElementById('prepare-connection').onclick = function() {
    if (isValidOption() == false) return;
    this.disabled = true;
    setupConnection();

    document.getElementById('setup-room').disabled = false;
};

document.getElementById('setup-room').onclick = function() {
    if (isValidOption() == false) return;
    this.disabled = true;

    // sharing you screen!
    connection.open();
};

function isValidOption() {
    var properties = document.querySelector('#ice-servers').value.split(', ');
    var iceServer = {};
    properties.forEach(function(property) {
        var tup = property.split(': ');
        iceServer[tup[0]] = tup[1];
    });

    var iceCandidates = document.querySelector('#ice-candidates').value;

    if (iceServer.url.indexOf('turn') != -1 && iceCandidates.indexOf('relay') == -1) {
        alert('It seems that you have not selected TURN server. Select "relay" to proceeed.');
        return false;
    }

    if (iceServer.url.indexOf('stun') != -1 && iceCandidates.indexOf('reflexive') == -1) {
        alert('It seems that you have not selected STUN server. Select "reflexive" to proceeed.');
        return false;
    }

    return true;
}
</script>